import React from 'react';
import ShopCartPage from './shopping-cart';
import shop_cart_logo from './imgs/SoppingCart_1.jpg'
import ReactDOM from 'react-dom';



class GoTOShoppingCart extends React.Component {
    constructor(props) {
        super(props);
    };

    render() {
        return (
            <button className="goTOShoppingCart" onClick={this.props.onShoplick}>我的购物车</button>
        );
    };
}

class ShopPageTop extends React.Component {  //右上方我的购物车

    constructor(props) {
        super(props);
    };

    render() {
        return (
            <div id='shop_top'>
                <img src={shop_cart_logo} alt={""}/>
                <GoTOShoppingCart onShoplick={this.props.onShoplick}/>
            </div>
        );
    };
}



export default class Shopping_page extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            goToCart: false,
        };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({
            goToCart: true,
        });
    }

    componentDidMount() {  //当组件输出到 DOM 后会执行 componentDidMount() 钩子

    }

    componentWillUnmount() { // 我们将在 componentWillUnmount()生命周期钩子中卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById("shop"));
    }

    render() {
        if (!this.state.goToCart) {  //false 渲染商城主页
            get_data_load();
            return (
                <ShopPageTop onShoplick={this.handleClick}/>);
        } else {   //true 渲染购物车
            removeShopGoods();
            return < ShopCartPage/>;
        }
    };
}

function removeShopGoods() {  //移除商品列表
    var bodyPar = document.body;
    var goodsDiv = document.getElementById("goodsList");
    bodyPar.removeChild(goodsDiv);

}



function get_data_load() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    // else
    // {// code for IE6, IE5
    //     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    // }

    var response_data = "null";
    var phone = "15079158510";  //用户手机号
    xmlhttp.open("GET", "http://192.168.1.115:8080/VP-server/Allgoods", true);  //--请求方式，服务器url,是否异步
    xmlhttp.send();
    xmlhttp.onreadystatechange = function () //<!-- 服务器每次状态改变 调用-->
    {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) //-- 200是ok
        {
            response_data = xmlhttp.responseText;
            load_data(response_data,phone);
        }
    }



}

function load_data(goods_data,phone) {  //将获取的json字符串列表 加载到动态创建的div..
    var json_list = JSON.parse(goods_data);  //json对象数组

    var parent1 = document.body;  //body标签
    var div_all = document.createElement("div");
    div_all.setAttribute("id","goodsList");
    parent1.appendChild(div_all);
    for (var i = 0; i < json_list.length; i++) {
        var div_data = json_list[i];  //json对象  一条商品数据

        var div1 = document.createElement("div");  //创建div
        div1.setAttribute("style", "float:left;");  //设置属性

        var img1 = document.createElement('img');
        img1.setAttribute("src", div_data.g_img);
        img1.setAttribute("style", "margin-left: 15px; margin-top:10px; ");

        var h1 = document.createElement('h4');
        h1.setAttribute('style', 'margin-left:78px;font-size:18px');
        h1.innerHTML = div_data.g_name;

        var h2 = document.createElement('h5');
        h2.setAttribute('style', 'margin-left:58px;font-size:18px');
        h2.innerHTML = "功能:" + "成长值+88";

        var h3 = document.createElement('h5');
        h3.setAttribute('style', 'margin-left:58px;font-size:18px');
        h3.innerHTML = "价格：" + String(div_data.g_price) + "金币"
        var button1 = document.createElement('button');
        button1.innerHTML = "加入购物车";
        button1.setAttribute('id', String(i))
        button1.setAttribute('style', "margin-left:50px; font-size:20px;");

        button1.onclick = function () {  //点击加入购物车响应事件
            var g_id = json_list[parseInt(this.id)].g_id;
            var g_num = 1;

            // var req_form = new FormData();
            // req_form.append("phone",phone);
            // req_form.append("g_id",g_id);
            // req_form.append("g_num",1);
           var req_form = {"phone":phone,"g_id":g_id,"g_num":1};
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", "http://192.168.1.115:8080/VP-server/shopping_cart/add", true);  //--请求方式，服务器url,是否异步



            xmlhttp.send(JSON.stringify(req_form));
            xmlhttp.onreadystatechange = function () //<!-- 服务器每次状态改变 调用-->
            {
                if (xmlhttp.readyState === 4 && xmlhttp.status === 200) //-- 200是ok
                {

                    alert(xmlhttp.responseText);
                }
            }



        }

        div1.appendChild(img1);
        div1.appendChild(h1);
        div1.appendChild(h2);
        div1.appendChild(h3);
        div1.appendChild(button1);

        div_all.appendChild(div1);
    }
}
